<template>
  <a-modal :open="open" width="1200px" title="维护人员" centered ok-text="保存" :footer="false" @ok="onOk" @cancel="onCancel">
    <a-form ref="formRef" :model="formState" class="form-style-flex" @keydown.enter="getDetailData">
      <div class="flex flex-1">
        <a-form-item name="pyjm" class="w-[300px]">
          <a-input v-model:value="formState.pyjm" placeholder="员工编号/员工姓名/助记码" />
        </a-form-item>
      </div>
      <a-form-item class="pl-20">
        <a-button class="mr-2" @click="onClickReset">重置</a-button>
        <a-button type="primary" @click="getDetailData">搜索</a-button>
      </a-form-item>
    </a-form>
    <div class="flex flex-col h-full">
      <BaseTable
        row-key="id"
        :data-source="dataSource"
        column-code="000502"
        :loading="loading"
        :height="380"
        :extra-height="64"
        :row-class-name="(record) => (record.isNew ? 'table-row-new' : '')"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'status'">
            <a-tag v-if="record.status === '0'" color="green">启用</a-tag>
            <a-tag v-if="record.status === '1'" color="red">停用</a-tag>
          </template>
          <template v-if="column.dataIndex === 'empName'">
            <EditCell title="名称">
              <SelectTable v-model:value="record.empName" type="员工" @select="onSelectName($event, record)" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <BaseButton confirm-text="确定移除？" type="text" danger size="small" @click="onClickDelete(record)">移除</BaseButton>
          </template>
        </template>
        <template #footer>
          <div class="text-center sticky bottom-0">
            <a-button class="mr-2" type="primary" ghost @click="addRow()"> 新增一行 </a-button>
            <a-button type="primary" :disabled="dataSource.length === 0" @click="fetchSave()"> 保存 </a-button>
          </div>
        </template>
      </BaseTable>
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:open'])
const dataSource = ref([])
const formState = ref({})
const loading = ref(false)
const fetchSave = async (row) => {
  if (row?.isNew) return
  const { code, msg } = await post('/operation/opex/saveDrugStorePersonnelList', {
    storeId: props.rowData?.id,
    list: dataSource.value
  })
  if (code !== 0) return message.error(msg || '操作失败')
  getDetailData()
  message.destroy()
  message.success('保存成功')
}

//添加行
const addRow = () => {
  const key = `row-${dataSource.value.length}`
  const addRow = { key, isNew: true }
  dataSource.value.push(addRow)
}

// 获取列表
const getDetailData = async () => {
  loading.value = true
  const { data, code, msg } = await post('/operation/opex/drugStorePersonnelList', {
    pyjm: formState.value?.pyjm,
    storeId: props.rowData?.id,
    pageNum: 1,
    pageSize: 999
  })
  loading.value = false
  if (code !== 0) return message.error(msg)
  dataSource.value = data
}

// 选择员工
const onSelectName = (row, record) => {
  record.empName = row?.empName
  record.sex = row?.sex
  record.age = row?.age
  record.phone = row?.phone
  record.empId = row?.empId
  record.bmmc = row?.bmmc
  record.ksmc = row?.ksmc
  record.ksdm = row?.ksdm
  record.emplb = row?.emplb
  record.wardId = props.rowData?.id
  fetchSave(record)
}

// 移除
const onClickDelete = async (row) => {
  if (row.id) {
    const { code, msg } = await post('/operation/opex/delDrugStorePersonnel', { id: row.id })
    if (code !== 0) return message.error(msg || '删除失败')
    message.success('删除成功')
    getDetailData()
  } else {
    dataSource.value = dataSource.value.filter((item) => item.key !== row.key)
  }
}

const onClickReset = () => {
  formState.value = {}
  getDetailData()
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    val && getDetailData()
  }
)
</script>
<style lang="less" scoped>
.ant-form {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;
  :deep(.ant-form-item) {
    .ant-form-item-label {
      width: 90px;
    }
  }
  .ant-picker {
    width: 100%;
  }
}
</style>
